{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ocean Drugs</title>

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">


    <link rel="stylesheet"  href="{% static 'css/common.css' %}" type="text/css" />
    <link rel="stylesheet"  href="{% static 'css/main.css' %}" type="text/css" />
    <link rel="stylesheet"  href="{% static 'css/styles.css' %}" type="text/css" />
    <link rel="stylesheet"  href="{% static 'css/bootstrap.min.css' %}" type="text/css" />
    <link rel="stylesheet"  href="{% static 'public/font-awesome/css/font-awesome.css' %}" type="text/css" />
    <link rel="stylesheet"  href="{% static 'css/all.min.css' %}" type="text/css" />

    <script type="text/javascript" src="{% static 'js/jquery-3.1.1.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.lazyload.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'public/layer/layer.js' %}"></script>
    <script type="text/javascript" src="{% static 'public/superslide/jquery.SuperSlide.2.1.3.js' %}"></script>

    <script type="text/javascript">
    {#var baseurl = "<?php echo $this->context->_baseUrl;?>";#}
    </script>



</head>
<body>

{#  {% include 'header.html' %}#}

	<header class="navbar navbar-inverse navbar-static" id="top"   v-loading="loading">
	    <div class="container">
	        <div id="main-nav-head" class="navbar-header">
	            <a href="/" class="navbar-brand" style="text-decoration: none;font-size: 32px;font-weight: bold;color:#000000">
	                <!-- <img src="/image/logo.svg" alt="Yii PHP Framework" width="165" height="35"> -->
					MolGlueDB
	            </a>
	            <button type="button" class="navbar-toggle" data-toggle="collapse" aria-label="Toggle navigation" data-target=".navbar-collapse"><i class="fa fa-inverse fa-bars"></i></button>
	        </div>

	        <div class="navbar-collapse collapse navbar-right">
	            <ul id="main-nav" class="nav navbar-nav navbar-main-menu nav" v-if="navs && navs.length > 0">

				<li class="dropdown "  v-for="(item, index) in navs" @mouseleave="handleLeave(item)"  @click="handleEnter(item)">
							<div class=" title dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false" @click="(item.children &&  item.children!=null)?toggleSubmenu(item):redirect(item.link)"  >
								{{ item.title }}
								<span class="caret" v-if="item.children  &&  item.children!=null"></span>
							</div>
						<ul class="dropdown-menu" v-if="item.children  &&  item.children!=null" :class="[item.isExpand? 'dropdown-menu-active' : '']"  >
						<li  v-for="(itemm, indexx) in item.children"><span @click="redirect(itemm.link)" tabindex="-1">{{itemm.title}}</span></li>
						</ul>

				</li>
				<!-- <li class="active" title="API Documentation"><a href="/doc/api" @click="redirect(item.link)" >API</a></li> -->

					</ul>

	          <!--  <div class="nav navbar-nav navbar-right">
	                <ul id="login-nav" class="nav navbar-nav navbar-main-menu nav"><li><a href="/login">Login</a></li>

					</ul>
						 </div> -->

<!--	            <div class="nav navbar-nav navbar-right">-->
<!--                  <form id="search-form" class="navbar-form" action="/search" method="get">-->
<!--                  <input type="hidden" name="version" value="2.0">-->
<!--                  <input type="hidden" name="type" value="api">-->
<!--                  <div class="form-group nospace">-->
<!--                  <div class="input-group">-->
<!--                  <input type="text" class="form-control" id="search" name="q" placeholder="Search API…" autocomplete="off" value="" style="width: 226px;">-->
<!--                  </div>-->
<!--                  </div>-->
<!--                  <div id="search-resultbox" style="width: 350px; display: none;"></div>-->
<!--                  </form>-->
<!--              </div>-->


	        </div>
	    </div>
	</header>




    <div class="sitejumbo">
            <div class="container">
                <div class="container" style="margin-top:20px;">
                    <div class="row">
                        <div class="col-md-12">
                           <!-- <div class="dashed-heading-jumbo">
                                <span>
                                    <a href="/doc/guide/2.0/en/start-installation" class="btn" style="background:#f2f9fa">Get Started</a>
                                </span>
                            </div> -->
                        </div>
                    </div>
                </div>


                <div class="panel panel-default" style="background:none;border:none;margin-top:20px;">
                                    <div class="panel-body" >




                                        <div class="mini-search-form" action="/search" method="get"
                                        style="margin-top:0;box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);border:1px solid #ACC0E1;border-radius: 10px;">
                                        <input type="hidden" name="version" value="2.0">
                                           <div class="flex   "  style="">
                                                <div  class="flex-1" style="position: relative;border-radius: 4px;

                                                ">
                                                    <input type="hidden" name="type" value="extension">
                                                    <input type="text" class="form-control" style="height:55px;border:0;box-shadow:8px;border:0;border-radius: 10px; border-top-right-radius: 0;border-bottom-right-radius: 0;" name="keyword" v-model="keyword"
                                                     placeholder="Search …" autocomplete="off" aria-label="Search box">

                                                    </div>

                                                    <button   @click="submit()" type="button" class="searchbtn "
                                                    style="background:#ffffff;

                                                    background-repeat: no-repeat; background-size: 70%;
                                                    background-position: 50% 60%;
                                                     display:block; padding: 6px 12px;width:55px;height:55px;box-shadow:none;border:0;border-radius: 10px;border-top-left-radius: 0;border-bottom-left-radius: 0;">
                                                    </button>
                                            </div>
                                        </div>
                                        <div class="flex-row  f-j-start items-center    " style="margin-top:10px">
                                            <div class="flex   "  style="margin-right:20px">

                                                <text class="" style="color:#4D5B8C">Example:</text>
                                            </div>
                                            <div class="flex   "  style="margin-right:20px;text-decoration: underline;"
                                                @click="jump(item.path)"
                                                v-for="item,index in exampleArray">
                                                <text class="" style="cursor: pointer;color:#4D5B8C"  >{{item.title}}</text>
                                            </div>


                                        </div>

                                        <div class="flex-row   search_tabs   mt20 mb20" style="">
                                            <div class="flex-col justify-start items-center tabs_text "  style=""
                                                @click="selectCateMethod(index)"
                                                :class="{'tabs_text_active':cateArray_index.includes(index) }"
                                                v-for="item,index in cateArray">
                                                {{item}}
                                            </div>

                                            <ketcher @confirmed="handleConfirmed" style="" :showEdit="showEdit"></ketcher>
                                        </div>


                                    </div>
                </div>



               <div class="row" >
                </div>
            </div>

            <div class="container">
                <div id="Glide" class="glide glide--carousel glide--horizontal">
                    <div class="glide__wrapper">

                    </div>
                 </div>
            </div>
    </div>


	<div class="container ">
		<div class="content">
			<div class="row">
				<div class="col-md-12">



		<div class="row">

		<!-- 	<div class="heading-separator">
				<h2><span>About MolGlueDB</span></h2>
			</div> -->


			<div class="con_container">
			    <!-- <img class="img " src="/src/assets/images/bg1.jpg" alt=""> -->

				    <div style="float: right;  opacity: 0.8; margin-left: 20px; margin-bottom: 0px;">
				      <video width="600" height="330"  style="object-fit: cover;"
				        ref="video"
				        class="video"
				        autoplay
				        playsinline
				        muted
				        loop
				      >
				        <source  style="object-fit: cover;" src="/src/assets/images/index.mp4" type="video/mp4">
				        Your browser does not support the video tag.
				      </video>
				    </div>

			    <!-- <h3 class="title">《滕王阁序》</h3> -->
			    <div class="content"  style="   text-align: justify; text-indent: 0;padding-top:5px;">
					<h2><span>About MolGlueDB</span></h2>
			   Molecular glue (MG), together with PROTAC are the two major fields of targeted protein degradation (TPD) that hijack intracellular ubiquitin-proteasome system (UPS) to selectively effect proximity-induced protein degradation, and represents a novel and enticing therapeutic strategy with intrinsic advantages over traditional inhibition methods. MG possesses much more concise molecular structure than PROTAC, and this brings great opportunity of it to obtain satisfactory drug-likeness properties. Thus, over the past decade, this technology has been achieving significant advancements, with 13, 4, 3 and 5 MGs advancing into preclinical, Phase I, Phase II, Phase III clinical trials stages. However, it remains immature due to its novel mode of action and intricate logic of rational design. A web-based open-access database MolGlueDB encompassing all related works can be a significant help for researchers to start the rational design of MGs. In this research, by extracting information from 122 publications (2014~2024), we comprehensively charted the landscape of 861 entries existing MGs encompassing 45 primary targets and 18 corresponding secondary targets, as well as their chemical structures, structural features, binding affinities, degradation capacities, biological activities, physicochemical properties, proteomics, etc. MolGlueDB can be queried using two primary searching approaches: text-based and structure-based searches. Additionally, to enhance user convenience, a filtering tool is provided to refine search results based on the physicochemical properties of compounds. The MolGlueDB database can be accessible at http://www.molgluedb.com.
			    </div>
			</div>


		</div>


					</div>
				</div>
			</div>
	</div>





	<div class="container ">
		<div class="content">
			<div class="row">
	            <div class="col-md-12">
					<div  class=" flex flex-row  f-j-b  items-center  wp100  hp100"  >


						<div   class=" center  flex-row align-center items-center  "  style="color:#ffffff;padding:20px;width:240px;border:1px solid #ccc;border-radius: 10px;font-size:18px;background:#88ABE2 ">
							<div  class="flex-1 center  flex-col align-center items-center ">
								<p class="text-ellipsis-line3" style="">860</p>
								<p class="text-ellipsis-line3" style="">Molecular Glues</p>
							</div>
						</div>
						<div   class=" center  flex-row align-center items-center  "  style="color:#ffffff;padding:20px;width:240px;border:1px solid #ccc;border-radius: 10px;font-size:18px;background:#88ABE2 ">
							<div  class="flex-1 center  flex-col align-center items-center ">
								<p class="text-ellipsis-line3" style="">41</p>
								<p class="text-ellipsis-line3" style="">Relevant Targets</p>
							</div>
						</div>

						<div   class=" center  flex-row align-center items-center  "  style="color:#ffffff;padding:20px;width:260px;border:1px solid #ccc;border-radius: 10px;font-size:18px;background:#88ABE2 ">
							<div  class="flex-1 center  flex-col align-center items-center ">
								<p class="text-ellipsis-line3" style="">33</p>
								<p class="text-ellipsis-line3" style="">Preclinical and Follow-up</p>
							</div>
						</div>

						<div   class=" center  flex-row align-center items-center  "  style="color:#ffffff;padding:20px;width:260px;border:1px solid #ccc;border-radius: 10px;font-size:18px;background:#88ABE2 ">
							<div  class="flex-1 center  flex-col align-center items-center ">
								<p class="text-ellipsis-line3" style="">354</p>
								<p class="text-ellipsis-line3" style="">Picture information</p>
							</div>
						</div>



					</div>
				</div>
			</div>
		</div>
	</div>





    <div class="footer" :style="{ '--bgcolor': options.bgcolor, '--space': options.space + 'px' }" style="background-color: #000;">
        <div :class="['wraper', options.showfull == 1 ? 'ml10 mr10' : 'w']">
        <!--    <div class="uni-flex uni-row flex-middle flex-center pd10 f-c55">
                <p v-for="(item, index) in options.navs">
                    <span @click="redirect(item.link)" class="pointer rlink">{{ item.title }}</span>
                    <i class="divider inline-block ml10 mr10"></i>
                </p>
                <p><span @click="clear" class="pointer rlink">清除缓存</span></p>
            </div> -->
            <div class="info f-gray center f-13 pb10 pt10">
                <!-- <span v-if="options.copyright">{{ options.copyright }}</span> -->
                <span >Copyright © 2015- molgluedb.com  All rights reserved</span>
               <a v-if="site.icp" class="ml10 rlink f-gray" href="https://beian.miit.gov.cn" target="_blank">Record number：鲁ICP备2025138021号</a>
					  <visitor-counter @increment="incrementVisitorCount"></visitor-counter>
            </div>
        </div>
    </div>
{#  {% include 'footer.html' %}#}

